<template>
  <div id="app">
    <my-header>星座物语</my-header>
    <nav-bar></nav-bar>
    <error-tip></error-tip>
    <router-view v-slot="{ Component }" v-if="!errorCode">
      <keep-alive>
        <component :is="Component"></component>
      </keep-alive>
    </router-view>
    <tab></tab>
  </div>
</template>

<script>
import MyHeader from "./components/Header";
import NavBar from "./components/NavBar/index.vue";
import Tab from "./components/Tab";
import ErrorTip from "./components/ErrorTip/index.vue";

import { computed, watch } from "vue";
import { useRouter } from "vue-router";
//获取仓库
import { useStore } from "vuex";

export default {
  name: "App",
  components: {
    MyHeader,
    NavBar,
    Tab,
    ErrorTip,
  },
  setup() {
    const store = useStore(),
      state = store.state,
      router = useRouter();

    //刷新页面时回归到根页面
    router.push("/");
    store.commit("setField", "today");

    //每次切换路由都要保存field(today/week...)到state里来确保每次请求数据需要传入最新的field参数
    watch(
      () => {
        //监听路由名称
        return router.currentRoute.value.name;
      },
      (value) => {
        // console.log(value);
        //today/tomorrow/week...
        //将路由拿到的名字更新到state里的field
        store.commit("setField", value);
      }
    );

    return {
      errorCode: computed(() => state.errorCode),
    };
  },
};
</script>

<style lang="scss">
</style>
